<template>
  <div class="props-container">
    <el-tabs v-model="configType">
      <el-tab-pane name="0">
        <div slot="label" class="flex-center">
          卡片配置<InfoIcon content="默认单位为px，若需要配置其他单位请自行输入" style="margin-left: 6px"/>
        </div>
        <el-form ref="cardConfigRef" :model="cardConfigsData" :rules="cardConfigRules" label-width="100px" label-position="top">
          <template v-for="item in cardConfigs">
            <el-form-item :key="item.value" :label="item.label" :class="{'is-required': !!item.isRequired}" :prop="item.value" class="top-label">
              <el-input
                v-model.trim="cardConfigsData[item.value]"
                :name="item.label"
                maxlength="50"
                size="small"
                class="width240"
                placeholder="请输入"
                type="text"
                @input="valRemoveChinese($event, item.value)"
              />
            </el-form-item>
          </template>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="1" label="字段配置">
        <template v-if="currActiveOptionIndex !== -1">
          <div class="flex-center" style="font-size: 14px; margin-bottom: 8px">
            <div style="color: #999; white-space: nowrap">字段名称：</div>
            <div>{{ currActiveOptionData.name }}</div>
          </div>
          <el-form
            ref="cardConfigRef"
            :model="currActiveOptionData"
            :rules="fieldConfigRules"
            :style="{ paddingBottom: activeKey.startsWith('divider') ? 0 : '24px' }"
            label-position="top">
            <template v-for="item in fieldConfigs">
              <el-form-item
                v-if="!isHide(item.hideData) && dynamicTagField(item)"
                :key="item.value"
                :label="item.label"
                :class="[!!item.isRequired && 'is-required', item.type === 'switch' ? 'label-left' : 'top-label']"
                :prop="item.value">
                <el-input
                  v-if="item.type === 'input'"
                  v-model.trim="currActiveOptionData[item.value]"
                  :name="item.label"
                  maxlength="50"
                  size="small"
                  class="width240"
                  placeholder="请输入"
                  type="text"
                />
                <el-switch
                  v-else-if="item.type === 'switch'"
                  v-model="currActiveOptionData[item.value]"
                />
                <SelectWithoutHttp
                  v-else-if="item.type === 'select'"
                  v-model="currActiveOptionData[item.value]"
                  :list-data="item.options"
                  :multiple="!!item.isMultiple"
                  :key-name="item.valueName || 'value'"
                  :label-name="item.labelName || 'label'"
                  clearable
                  collapse-tags
                  placeholder="请选择"
                  filterable
                  class="width240"
                  @change="handleSelectChange($event, item.value)"
                />
                <el-input-number
                  v-else-if="item.type === 'number'"
                  v-model="currActiveOptionData[item.value]"
                  :precision="0"
                  :step="item.step || 1"
                  :min="item.minNumber"
                  :max="item.maxNumber"
                  :class="item.class || 'width240'"
                  controls-position="right"
                  size="small"/>
                <colorSketch
                  v-else-if="item.type === 'colorPicker'"
                  v-model="currActiveOptionData[item.value]"
                />
                <div v-else-if="item.type === 'align'" class="align-wrap">
                  <div class="align-content">
                    <div class="item">
                      <div v-for="i in item.rowOptions" :key="i.value" @click="alignChange('textAlign', i.value)">
                        <img :src="currActiveOptionData[item.rowValue] === i.value ? i.activeUrl : i.url" alt="" class="img-icon">
                      </div>
                    </div>
                    <div class="item">
                      <div v-for="i in item.colOptions" :key="i.value" @click="alignChange('verticalAlign', i.value)">
                        <img :src="currActiveOptionData[item.colValue] === i.value ? i.activeUrl : i.url" alt="" class="img-icon">
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else-if="item.type === 'distance'" class="distance">
                  <div v-for="field in item.options" :key="field.key" class="margin-item flex-center">
                    <span class="label">{{ field.label }}</span>
                    <el-input-number
                      v-model="currActiveOptionData[item.value][field.key]"
                      :precision="0"
                      :step="item.step || 1"
                      :min="item.minNumber"
                      :max="item.maxNumber"
                      class="width85"
                      controls-position="right"
                      size="small"/>
                  </div>
                </div>
                <div v-else-if="item.type === 'radius'" class="radius">
                  <span class="label">{{ item.name }}</span>
                  <el-input-number
                    v-model="currActiveOptionData[item.value]"
                    :precision="0"
                    :step="item.step || 1"
                    :min="item.minNumber"
                    :max="item.maxNumber"
                    class="width85"
                    controls-position="right"
                    size="small"/>
                </div>
                <div v-else-if="item.type === 'fontStyle'" class="title-config">
                  <template v-for="i in item.options">
                    <img
                      :key="i.key"
                      :src="currActiveOptionData[item.value] && currActiveOptionData[item.value].includes(i.key) ? i.activeIcon : i.icon"
                      :title="i.tip"
                      alt=""
                      @click="mulConfigChange(item.value, i.key)">
                  </template>
                </div>
                <div v-else-if="item.type === 'borderLine'" class="align-wrap" style="border-bottom: none">
                  <div class="align-content" style="border: none; margin-bottom: 0">
                    <template v-for="i in item.options">
                      <div
                        :key="i.key"
                        :class="{ 'border-style-item-active': currActiveOptionData[item.value] === i.key }"
                        class="border-style-item item"
                        @click="borderStyleChange(item.value, i.key)">
                        <div :style="{borderTop: `2px ${i.key} #333`}" />
                      </div>
                    </template>
                  </div>
                </div>
                <div v-else-if="item.type === 'borderVisible'" class="border-visible-box">
                  <div
                    :style="setActiveBorder(currActiveOptionData[item.value])"
                    class="border-visible">
                    <template v-for="i in item.options">
                      <div :key="i" :class="[`${i}-visible`]" class="visible-btn" @click="mulConfigChange(item.value, i)" />
                    </template>
                  </div>
                </div>
              </el-form-item>
            </template>
          </el-form>
          <div v-if="currActiveOptionData.key && currActiveOptionData.key.startsWith('divider')" style="padding-bottom: 24px">
            <el-button type="primary" size="small" class="divider-btn" @click="copyDivider">复制组件</el-button>
            <el-button :disabled="currActiveOptionData.key === 'divider'" class="divider-btn" type="danger" plain size="small" @click="delDivider">删除组件</el-button>
          </div>
        </template>
        <div v-else class="empty-container">
          <div class="img"><img :src="EmptyImg" alt=""></div>
          <div class="label">请选择字段</div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import SelectWithoutHttp from '@/components/Common/selectWithoutHttp';
import colorSketch from './module/colorSketch.vue';
import { forEachFormOptions } from '@/utils/formMakeUtils';
import EmptyImg from '@/assets/empty-table-data.png';
import left from '@/assets/reportManage/left.png';
import left_none from '@/assets/reportManage/left-none.png';
import right from '@/assets/reportManage/right.png';
import right_none from '@/assets/reportManage/right-none.png';
import center from '@/assets/reportManage/center.png';
import center_none from '@/assets/reportManage/center-none.png';
import top from '@/assets/reportManage/top.png';
import top_none from '@/assets/reportManage/top-none.png';
import bottom from '@/assets/reportManage/bottom.png';
import bottom_none from '@/assets/reportManage/bottom-none.png';
import bold from '@/assets/reportManage/bold.png';
import bold_active from '@/assets/reportManage/bold_active.png';
import italic from '@/assets/reportManage/italic.png';
import italic_active from '@/assets/reportManage/italic_active.png';
import underline from '@/assets/reportManage/underline.png';
import underline_active from '@/assets/reportManage/underline_active.png';
import { mapState } from 'vuex';

export default {
  components: { colorSketch, SelectWithoutHttp },
  model: {
    prop: 'cardConfigsData',
    event: 'change'
  },
  props: {
    cardConfigsData: {
      type: Object,
      default: () => ({
        width: '400',
        minWidth: '',
        maxWidth: '',
        height: '',
        minHeight: '',
        maxHeight: '',
        options: [],
        isEnable: false
      })
    },
    activeKey: {
      type: String,
      default: ''
    },
    formList: {
      type: Array,
      default: () => []
    },
    cardFields: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      EmptyImg,
      configType: '0',
      left, left_none, right, right_none, center, center_none, top, top_none, bottom, bottom_none,
      bold, bold_active, italic, italic_active, underline, underline_active
    };
  },
  computed: {
    ...mapState({
      'userWidget': state => state.formMake.widgetTypes.user
    }),
    cardConfigs() {
      return [
        { label: '宽度', value: 'width', isRequired: true },
        { label: '最小宽度', value: 'minWidth' },
        { label: '最大宽度', value: 'maxWidth' },
        { label: '高度', value: 'height' },
        { label: '最小高度', value: 'minHeight' },
        { label: '最大高度', value: 'maxHeight' }
      ];
    },
    userListWithoutSubform() { // 没有子表单的用户字段
      const arr = [{ key: -1, name: '创建人' }].concat(this.userWidget || []);
      return (arr).filter(i => {
        return !i.isSubTable;
      });
    },
    fieldConfigs() {
      return [
        { label: '是否展示标题', value: 'showTitle', type: 'switch', isRequired: true, hideData: { typeArr: ['upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }},
        { label: '标题是否换行', value: 'titleWrap', type: 'switch', isRequired: true, hideData: { typeArr: ['upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }},
        { label: '字段无内容时显示', value: 'emptyVisible', type: 'switch', hideData: { typeArr: ['upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }},
        { label: '标题格式', value: 'titleStyle', type: 'fontStyle', hideData: { hasValue: ['showTitle'], typeArr: ['upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] },
          options: [{ key: 'bold', icon: bold, activeIcon: bold_active, tip: '加粗' }, { key: 'italic', icon: italic, activeIcon: italic_active, tip: '斜体' }, { key: 'underline', icon: underline, activeIcon: underline_active, tip: '下划线' }]
        },
        { label: '预设值(仅供预览)', value: 'defaultValue', type: 'input', hideData: { typeArr: ['richEditor', 'upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }},
        { label: '展示样式', value: 'showType', type: 'select', isRequired: true, hideData: { typeArr: ['richEditor', 'upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }, options: [{ label: '文本展示', value: 'text' }, { label: '标签展示', value: 'tag' }] },
        { label: '头像取值', value: 'userLinkKey', labelName: 'name', isRequired: true, valueName: 'key', type: 'select', hideData: { showKey: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }, options: this.userListWithoutSubform },
        { label: '方向', value: 'dividerDirection', type: 'select', hideData: { startsWithKeys: ['divider'] }, options: [{ label: '横向', value: 0 }, { label: '纵向', value: 1 }] },
        { label: '所占位栅格数(1-24)', value: 'gridType', type: 'number', isRequired: true, hideData: {}, minNumber: 1, maxNumber: 24 },
        { label: '线宽', value: 'dividerWidth', type: 'number', isRequired: true, hideData: { startsWithKeys: ['divider'] }, minNumber: 0, maxNumber: 10 },
        { label: '线条类型', value: 'dividerStyle', type: 'borderLine', options: [{ key: 'solid' }, { key: 'dashed' }, { key: 'dotted' }], hideData: { startsWithKeys: ['divider'] }},
        { label: '线条颜色', value: 'dividerColor', type: 'colorPicker', isRequired: true, hideData: { startsWithKeys: ['divider'] }},
        { label: '头像直径(像素)', value: 'avatarSize', type: 'number', hideData: { showKey: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }, minNumber: 24, maxNumber: 100 },
        { label: '显示字符长度', value: 'fontLength', type: 'number', isRequired: true, hideData: { typeArr: ['richEditor', 'upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }, minNumber: 1, maxNumber: 500 },
        { label: '文字字号', value: 'fontSize', type: 'number', isRequired: true, hideData: { typeArr: ['richEditor', 'upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }, minNumber: 12, maxNumber: 60 },
        { label: '文字颜色', value: 'fontColor', type: 'colorPicker', isRequired: true, hideData: { typeArr: ['richEditor', 'upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }},
        { label: '标签填充颜色', value: 'tagColor', type: 'colorPicker', isRequired: true, hideData: { typeArr: ['richEditor', 'upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] }},
        { label: '对齐方式', rowValue: 'textAlign', colValue: 'verticalAlign', type: 'align', hideData: { typeArr: ['richEditor', 'upAttachment'], hideStartsWithKeys: ['divider'] },
          rowOptions: [{ value: 'flex-start', label: '左', url: left_none, activeUrl: left }, { value: 'center', label: '中', url: center_none, activeUrl: center }, { value: 'flex-end', label: '右', url: right_none, activeUrl: right }],
          colOptions: [{ value: 'flex-start', label: '上', url: top_none, activeUrl: top }, { value: 'center', label: '中', url: center_none, activeUrl: center }, { value: 'flex-end', label: '下', url: bottom_none, activeUrl: bottom }]
        },
        { label: '组件外边距', value: 'margin', type: 'distance', minNumber: 0, maxNumber: 99, hideData: {},
          options: [{ key: 'top', label: '顶部' }, { key: 'bottom', label: '底部' }]
        },
        { label: '组件内边距', value: 'padding', type: 'distance', minNumber: 0, maxNumber: 99, hideData: {},
          options: [{ key: 'top', label: '顶部' }, { key: 'bottom', label: '底部' }, { key: 'left', label: '左侧' }, { key: 'right', label: '右侧' }]
        },
        { label: '圆角', value: 'radius', type: 'distance', minNumber: 0, maxNumber: 100, hideData: { typeArr: ['richEditor', 'upAttachment'], keys: ['creatorAvatar'], hideStartsWithKeys: ['divider'] },
          options: [{ key: 'topLeft', label: '左上' }, { key: 'topRight', label: '右上' }, { key: 'bottomLeft', label: '左下' }, { key: 'bottomRight', label: '右下' }]
        },
        { label: '边框样式', value: 'borderStyle', type: 'borderLine', options: [{ key: 'solid' }, { key: 'dashed' }, { key: 'dotted' }], hideData: { hideStartsWithKeys: ['divider'] }},
        { label: '边框可见性', value: 'borderVisible', type: 'borderVisible', options: ['top', 'right', 'bottom', 'left'], hideData: { hasValue: ['borderStyle'] }},
        { label: '选项隐藏', value: 'optionsHide', type: 'select', labelName: 'id', valueName: 'id', isMultiple: true, options: [], hideData: { showTypes: ['select', 'checkbox', 'radio'] }}
      ];
    },
    cardConfigRules() {
      return {
        width: [{ required: true, trigger: 'blur', message: '请输入' }]
      };
    },
    fieldConfigRules() {
      return {
        fontLength: [{ required: true, trigger: ['change', 'blur'], message: '请输入' }],
        fontSize: [{ required: true, trigger: ['change', 'blur'], message: '请输入' }],
        gridType: [{ required: true, trigger: ['change', 'blur'], message: '请输入' }],
        fontColor: [{ required: true, trigger: 'change', message: '请输入' }],
        tagColor: [{ required: true, trigger: 'change', message: '请输入' }]
      };
    },
    getDividerMaxIndex() { // 分割线组件最大序号
      const dividers = this.cardFields.filter(i => i.key.startsWith('divider'));
      const dividersIndexArr = dividers.map(i => Number(i.key.replace('divider', '')));
      return Math.max(Number(dividersIndexArr.sort((a, b) => b - a)[0]), 1);
    },
    currActiveOptionIndex() {
      return this.cardConfigsData.options.findIndex(i => i.key === this.activeKey);
    },
    currActiveOptionData() {
      return this.cardConfigsData.options[this.currActiveOptionIndex] || {};
    }
  },
  watch: {
    activeKey(key) {
      this.$nextTick(() => {
        // 下拉组件选项隐藏配置数据
        const hideConfigIndex = this.fieldConfigs.findIndex(config => config.value === 'optionsHide');
        const { showTypes } = this.fieldConfigs[hideConfigIndex].hideData;
        if (showTypes.includes(this.currActiveOptionData.type)) {
          forEachFormOptions(this.formList, i => {
            if (showTypes.includes(i.type) && i.key === key) {
              this.fieldConfigs[hideConfigIndex].options = [{ id: '无选项' }, ...i.options.options];
              this.$forceUpdate();
            }
          });
        }
      });
    }
  },
  methods: {
    isHide(hideData = {}) {
      const { typeArr, keys, showKey, hasValue, showTypes, startsWithKeys, hideStartsWithKeys } = hideData;
      if (showKey) {
        return !showKey.includes(this.currActiveOptionData.key);
      } else if (Array.isArray(hasValue)) { // 关联字段为true时显示
        return hasValue.every(v => !this.currActiveOptionData[v]);
      } else if (Array.isArray(showTypes)) {
        return showTypes.every(type => this.currActiveOptionData.type !== type);
      } else if (startsWithKeys) { // 分割线为动态key，特殊处理
        return startsWithKeys.every(key => !this.currActiveOptionData.key.startsWith(key));
      }
      return (typeArr || []).includes(this.currActiveOptionData.type) ||
        (keys || []).includes(this.currActiveOptionData.key) ||
        (hideStartsWithKeys || []).some(key => this.currActiveOptionData.key.startsWith(key));
    },
    dynamicTagField(item) {
      const isTag = this.currActiveOptionData['showType'] === 'tag';
      if (isTag) {
        return item.value !== 'titleWrap';
      }
      return !['radius', 'tagColor'].includes(item.value);
    },
    valRemoveChinese(text, key) {
      this.cardConfigsData[key] = text.replace(/[\u4e00-\u9fa5]/g, '');
    },
    handleSelectChange(status, key) {
      if (status === 'tag' && key === 'showType') {
        this.currActiveOptionData.titleWrap = false;
      }
    },
    alignChange(key, value) {
      this.$set(this.currActiveOptionData, key, value);
    },
    mulConfigChange(key, value) {
      const hasValue = Array.isArray(this.currActiveOptionData[key]) && this.currActiveOptionData[key].length;
      if (hasValue) {
        if (this.currActiveOptionData[key].includes(value)) {
          this.currActiveOptionData[key] = this.currActiveOptionData[key].filter(i => i !== value);
        } else {
          this.currActiveOptionData[key].push(value);
        }
      } else {
        this.$set(this.currActiveOptionData, key, [value]);
      }
    },
    borderStyleChange(key, value) {
      if (!this.currActiveOptionData[key]) {
        this.$set(this.currActiveOptionData, key, value);
      } else if (this.currActiveOptionData[key] === value) {
        this.currActiveOptionData[key] = '';
      } else {
        this.$set(this.currActiveOptionData, key, value);
      }
    },
    setActiveBorder(list) {
      const borderStyle = {};
      if (Array.isArray(list) && list.length) {
        list.forEach(i => {
          borderStyle[`border-${i}-color`] = '#406eff';
          borderStyle[`border-${i}-width`] = '2px';
        });
      }
      return borderStyle;
    },
    copyDivider() {
      const currData = _.cloneDeep(this.currActiveOptionData);
      currData.key = 'divider' + (this.getDividerMaxIndex + 1);
      currData.name = '分割线' + (this.getDividerMaxIndex + 1);
      this.cardConfigsData.options.push(currData);
      this.$emit('change', this.cardConfigsData);
      this.$emit('updateCardFields', {
        key: currData.key,
        name: currData.name,
        isCheck: true
      }, false);
      this.$nextTick(() => {
        this.$emit('activeKeyChange', currData.key);
      });
    },
    delDivider() {
      this.$emit('updateCardFields', { key: this.activeKey }, true);
      this.cardConfigsData.options.splice(this.currActiveOptionIndex, 1);
      this.$emit('change', this.cardConfigsData);
    }
  }
};
</script>

<style lang="scss" scoped>
.props-container {
  width: 288px;
  flex-shrink: 0;
  z-index: 1;
  height: 100%;
  .label-left {
    display: flex;
    align-items: center;
    margin-bottom: 4px !important;
    &::v-deep {
      .el-form-item__label {
        width: 112px;
      }
      .el-form-item__content {
        margin-left: 6px;
        margin-top: -2px;
      }
    }
  }
  .top-label {
    &::v-deep {
      .el-form-item__label {
        line-height: 22px !important;
      }
    }
  }
  &::v-deep {
    .el-tabs {
      height: 100%;
      .el-tabs__nav-wrap::after {
        background-color: #ebeefd;
      }
      .el-tabs__content {
        height: calc(100% - 60px);
      }
      .el-tab-pane {
        height: 100%;
      }
      .is-active {
        font-weight: bold;
      }
    }
    .el-form-item {
      margin-bottom: 16px;
    }
    .el-tabs__content {
      height: calc(100% - 60px);
      @include scrollBar($x: hidden, $y: auto, $width: 3px);
    }
    .el-form-item__label {
      padding-bottom: 0;
    }
    .el-radio-button__inner {
      background: #fff;
    }
  }
  .empty-container {
    padding-top: 133px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      width: 120px;
      img {
        width: 100%;
      }
    }
    .label {
      color: #999;
      font-size: 14px;
      text-align: center;
    }
  }
  .width240 {
    width: 240px;
    & ::v-deep {
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .width85 {
    width: 85px;
    & ::v-deep {
      .el-input__inner {
        width: 85px;
      }
    }
  }
  .img-icon {
    width: 14px;
    height: 14px;
    cursor: pointer;
  }
  .align-wrap {
    border-bottom: 1px solid #ebeefd;
    .align-content {
      display: flex;
      align-items: center;
      width: 240px;
      height: 32px;
      border: 1px solid #dddddd;
      border-radius: 4px;
      margin-bottom: 24px;
      .item {
        display: flex;
        width: 50%;
        justify-content: space-evenly;
        align-items: center;
        cursor: pointer;
      }
      .item:nth-of-type(1) {
        border-right: 1px solid #dddddd;
      }
    }
  }
  .distance {
    display: flex;
    flex-wrap: wrap;
    .margin-item {
      flex-basis: 50%;
      margin-bottom: 24px;
      .label {
        color: #333;
        margin-right: 8px
      }
    }
    border-bottom: 1px solid #ebeefd;
  }
  .radius {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .label {
      color: #333;
      margin-right: 8px
    }
  }
  .title-config {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 160px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    > img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
  .border-style-item {
    width: 80px;
    height: 32px;
    border: 1px solid #dcdfe6;
    justify-content: center;
    cursor: pointer;
    > div {
      height: 1px;
      width: 80%;
    }
  }
  .border-style-item-active {
    border-color: #406eff !important;
    border-radius: 4px;
  }
  .border-style-item:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .border-style-item:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .border-visible-box {
    border: 1px solid #ddd;
    width: 120px;
    height: 120px;
    border-radius: 4px;
    .border-visible {
      position: relative;
      width: 80px;
      height: 80px;
      border: 1px solid #dcdfe6;
      margin: 20px;
      .visible-btn {
        position: absolute;
        cursor: pointer;
        border: 0.5px solid #333;
        border-radius: 2px;
      }
      .top-visible {
        width: 40px;
        height: 11px;
        left: 50%;
        top: 0;
        transform: translate(-50%, -6px);
      }
      .bottom-visible {
        width: 40px;
        height: 11px;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 6px);
      }
      .right-visible {
        width: 11px;
        height: 40px;
        top: 50%;
        right: 0;
        transform: translate(6px, -50%);
      }
      .left-visible {
        width: 11px;
        height: 40px;
        top: 50%;
        left: 0;
        transform: translate(-6px, -50%);
      }
    }
  }

  .divider-btn {
    padding-left: 12px;
    padding-right: 12px;
  }
}
</style>
